<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul, li {
        list-style: none;
    }

    .box {
        width: 250px;
        margin: 100px auto;
    }

    .box li {
        float: left;
        width: 24px;
        height: 24px;
        margin: 15px;
        background: url("../images/sprite.png") 0 0;
    }
</style>
<body>

  <div class="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <script>
    const lis = document.querySelectorAll('li');
    for (let i = 0; i < lis.length; i++) {
      const indexY = -i * 44;
      console.log(indexY);
      // console.log(lis[i])
      // bug点, 忘给 bgp 添加px了   --> 修改css样式的时候, 一定要注意单位
      lis[i].style.backgroundPosition = `0 ${indexY}px`;

    }

    // 42.5


  </script>
</body>
</html>
